<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>平台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" type="text/css" href="/css/plugins/dropzone/basic.css"/>
    <link rel="stylesheet" type="text/css" href="/css/plugins/dropzone/dropzone.css"/>
    <link rel="stylesheet" type="text/css" href="/css/plugins/layui-formSelect/formSelects-v4.css"/>
    <link rel="stylesheet" type="text/css" href="/css/sx/sku/sku_style.css"/>
    <link rel="stylesheet" type="text/css" href="/css/plat-style.css"/>
    <style>
        tr th{text-align: center !important;font-weight: bold !important;}
        tr td{text-align: center !important;}
        img{margin-left: 5px}
        .input-this{
            background-color: #E1FFFF;
        }
        .input-this-disabled{
            background-color: #DCDCDC;
            border-radius: 3px;
            cursor: no-drop;
        }
        .batch{
            width: 80px;
            background-color: #FFFACD;
            border:1px solid #ffffff;
            border-radius: 3px;
            text-align: center;
            color:red;
        }
        .check_code{
            line-height: 38px;
            margin-left: 20px;
            font-size: 14px;
            cursor: pointer;
            color:#1E90FF;
        }
        label{line-height: 38px;}
        .code-read{
            background-color: #F5F5F5;
        }
        .sku_old{
            font-size: 20px;
            color: #0a6aa1;
        }
        .sku_new{
            font-size: 20px;
            color: #FF4500;
        }
        .sku_div{
            text-align: center;
            margin-top:5px;
            margin-bottom: 5px;
        }
        .delSkuVal{
            color: red;
            cursor: pointer;
            font-size: 15px;
            text-decoration: none;
        }
        .block_margin{
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">
            <div class="layui-col-md-offset11">
                <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="history.go(-1)">返回上一页</button>
            </div>
        </div>
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="test">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="1">&nbsp;&nbsp;&nbsp;商品信息&nbsp;&nbsp;&nbsp;</li>
                    <li lay-id="2">&nbsp;&nbsp;&nbsp;商品规格&nbsp;&nbsp;&nbsp;</li>
                    <li lay-id="3">&nbsp;&nbsp;&nbsp;商品详情&nbsp;&nbsp;&nbsp;</li>
                </ul>
                <div class="layui-tab-content">
                    <%-- 基本设置 --%>
                    <div class="layui-tab-item layui-show" style="margin-top: 20px">
                        <input type="hidden" id="labelIds" value="${proc.label}">
                        <input type="hidden" id="proCodeSave" value="${proc.proCode}">
                        <form class="layui-form" id="addProductForm">
                            <input type="hidden" name="id" value="${proc.id}">
                            <input type="hidden" name="proType" value="${proc.proType}" id="proType">
                            <!-- 库存arr -->
                            <input type="hidden" id="stockList" name="stockArr">
                            <!-- 成本价arr -->
                            <input type="hidden" id="costList" name="costArr">
                            <!-- 销售价arr -->
                            <input type="hidden" id="priceList" name="priceArr">
                            <!-- sku编码arr -->
                            <input type="hidden" id="skuList" name="skuArr">
                            <input type="hidden" id="skuDetail" name="skuDetail">
                            <!-- 商品详情内容 -->
                            <%--<input type="hidden" id="procContent" name="pcDetail">--%>
                            <textarea hidden id="procContent" name="pcDetail"></textarea>
                            <input type="hidden" id="groupList" name="groupPriceArr">
                            <!-- 规格改变标记 -->
                            <input type="hidden" name="valEditStatus" id="skuChangeFlag" value="0">
                            <div class="layui-container">
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>商品名称</label>
                                    <div class="layui-col-sm4">
                                        <input type="text" name="proName" class="layui-input" placeholder="请输入商品名称" value="${proc.proName}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>商品编码</label>
                                    <div class="layui-col-sm4">
                                        <input type="text" name="proCode" class="layui-input code-read" placeholder="商品编码最长20位"
                                               id="proCode" value="${proc.proCode}" readonly>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>商品类型</label>
                                    <div class="layui-col-sm4">
                                        <select name="proType" data-type="9" id="proTypeVal" disabled>
                                            <option value="">请选择</option>
                                            <c:forEach items="${procTypeList}" var="p">
                                                <option value="${p.id}" ${proc.proType==p.id?'selected':''}>${p.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item" style="display: none;" id="advanceDiv">
                                    <div class="layui-col-sm12">
                                        <div class="layui-col-sm-offset2">
                                            <span class="green">时间格式：yyyy-MM-dd HH:mm:ss，如未选择时间，则默认为零点开始。</span>
                                        </div>
                                    </div>
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>预售时间</label>
                                    <div class="layui-col-sm2">
                                        <input type="text" class="layui-input test-item" name="advanceStart" placeholder="预售开始时间，点击选择">
                                    </div>
                                    <div class="layui-col-sm2" style="margin-left: 10px">
                                        <input type="text" class="layui-input test-item" name="advanceEnd" placeholder="预售结束时间，点击选择">
                                    </div>
                                    <div class="layui-col-sm2" style="margin-left: 10px">
                                        <input type="text" class="layui-input test-item" name="advanceDelivery" placeholder="预售发货时间，点击选择">
                                    </div>
                                </div>
                                <div class="layui-form-item" style="display: none;" id="groupInfoDiv">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>拼团信息</label>
                                    <div class="layui-col-sm2">
                                        <input type="text" class="layui-input" name="groupNum" data-type="tip1" value="${proGroupConfig.num}">
                                    </div>
                                </div>
                                <div class="layui-form-item" style="display: none;" id="groupTimeDiv">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>拼团时间</label>
                                    <div class="layui-col-sm2">
                                        <input type="text" class="layui-input test-item" name="groupStart"
                                               value="<fmt:formatDate value="${proGroupConfig.beginTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>"
                                               data-type="tip2">
                                    </div>
                                    <div class="layui-col-sm2" style="margin-left: 10px">
                                        <input type="text" class="layui-input test-item" name="groupEnd"
                                               value="<fmt:formatDate value="${proGroupConfig.overTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>"
                                               data-type="tip2">
                                    </div>
                                </div>
                                <div class="layui-form-item" id="customerLevel" style="display: none;">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>升级等级</label>
                                    <div class="layui-col-sm4">
                                        <select name="levelId">
                                            <c:forEach items="${levelList}" var="l">
                                                <option value="${l.id}" ${l.checkFlag} ${proc.levelId==l.id?'selected':''} ${l.checkFlag}>${l.name}</option>
                                            </c:forEach>
                                        </select>
                                        <blockquote class="layui-elem-quote block_margin">
                                            礼包商品需选择对应的会员等级，初始等级不可选。<br>
                                            礼包内容可填写在【产品描述】中。
                                        </blockquote>
                                    </div>
                                </div>
                                <hr>
                                <div class="layui-form-item">
                                    <div class="layui-col-sm-offset2 layui-col-sm6">
                                        <blockquote class="layui-elem-quote block_margin">
                                            1. 分类非必选，如未选择分类则仅通过商品编码或商品名称搜索。<br>
                                            2. 平台分类：在平台中显示的分类类目下。<br>
                                            3. 店铺分类：在店铺中显示的分类类目下。<br>
                                        </blockquote>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;&nbsp;平台分类</label>
                                    <div class="layui-col-sm2">
                                        <select name="mainClassifyFirstId" data-type="1" data-click="11">
                                            <option value="">请选择</option>
                                            <c:forEach items="${firstList}" var="f">
                                                <option value="${f.id}" ${proc.mainClassifyFirstId==f.id?'selected':''}>${f.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="layui-col-sm2" style="margin-left: 10px">
                                        <select class="classify secondClassify" name="mainClassifySecondId" data-type="2" data-click="21">
                                            <c:forEach items="${secondList}" var="s">
                                                <option value="${s.id}" ${proc.mainClassifySecondId==s.id?'selected':''}>${s.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="layui-col-sm2" style="margin-left: 10px">
                                        <select class="classify thirdClassify" name="mainClassifyThirdId" data-type="3">
                                            <c:forEach items="${thirdList}" var="t">
                                                <option value="${t.id}" ${proc.mainClassifyThirdId==t.id?'selected':null}>${t.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;&nbsp;店铺分类</label>
                                    <div class="layui-col-sm2">
                                        <select name="shopClassifyFirstId" data-type="5" data-click="51">
                                            <option value="">请选择</option>
                                            <c:forEach items="${shopList}" var="s">
                                                <option value="${s.id}" >${s.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
<%--                                    <div class="layui-col-sm2" style="margin-left: 10px">--%>
<%--                                        <select class="classify secondclass" name="shopClassifySecondId" data-type="6" data-click="61">--%>
<%--                                        </select>--%>
<%--                                    </div>--%>
<%--                                    <div class="layui-col-sm2" style="margin-left: 10px">--%>
<%--                                        <select class="classify thirdclass" name="shopClassifyThridId">--%>
<%--                                        </select>--%>
<%--                                    </div>--%>
                                </div>
                                <hr>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>产地</label>
                                    <div class="layui-col-sm2">
                                        <select name="producePro" data-type="8" data-click="81">
                                            <option value="">请选择</option>
                                            <c:forEach items="${addressList}" var="a">
                                                <option value="${a.id}" ${proc.producePro==a.id?'selected':''}>${a.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="layui-col-sm2" style="margin-left: 10px">
                                        <select class="classify city" name="produceCity">
                                            <c:forEach items="${cityList}" var="c">
                                                <option value="${c.id}" ${proc.produceCity==c.id?'selected':''}>${c.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*</span>运费模板</label>
                                    <div class="layui-col-sm4">
                                        <select name="expId">
                                            <option value="">请选择</option>
                                            <option value="0" ${proc.expId==0?'selected':''}>免邮</option>
                                            <c:forEach items="${expList}" var="f">
                                                <option value="${f.id}" ${proc.expId==f.id?'selected':''}>${f.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*</span>产品描述</label>
                                    <div class="layui-col-sm4">
                                        <textarea class="layui-textarea" name="proDesc" data-type="tip3">${proc.proDesc}</textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>提供发票</label>
                                    <div class="layui-col-sm4">
                                        <input type="radio" name="isInvoice" value="1" title="提供" ${proc.isInvoice==1?'checked':''}>
                                        <input type="radio" name="isInvoice" value="0" title="不提供" ${proc.isInvoice==0?'checked':''}>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>允许退款</label>
                                    <div class="layui-col-sm4">
                                        <input type="radio" name="isRefund" value="1" title="允许" ${proc.isRefund==1?'checked':''}>
                                        <input type="radio" name="isRefund" value="0" title="不允许" ${proc.isRefund==0?'checked':''}>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>计价方式</label>
                                    <div class="layui-col-sm4">
                                        <input type="hidden" id="checkType">
                                        <c:forEach items="${valuationList}" var="v">
                                            <input type="radio" name="valuationType" value="${v.id}"
                                                   title="${v.name}" ${proc.valuationType==v.id?'checked':''}>
                                        </c:forEach>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>单位名称</label>
                                    <div class="layui-col-sm4">
                                        <input type="text" name="proUnit" class="layui-input" value="${proc.proUnit}" id="unit" data-type="tip4">
                                    </div>
                                </div>
                                <div class="layui-form-item" style="display: none;" id="weightUnit">
                                    <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>重量单位</label>
                                    <div class="layui-col-sm4">
                                        <input type="text" name="weightUnit" class="layui-input" placeholder="请输入重量单位" id="wUnit">
                                        <blockquote class="layui-elem-quote block_margin" style="width: 530px">
                                            按重量计价时，每个数量 1 表示多少重量单位。<br>
                                            如:单位名称为克,重量单位填入的为10，则表示数量1代表10克，依此类推
                                        </blockquote>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;&nbsp;虚拟已售</label>
                                    <div class="layui-col-sm4">
                                        <input type="text" class="layui-input layui-input-inline" name="inventedNum" style="width: 280px"
                                               placeholder="可输入虚拟已售数量，需要请勾选！" value="${proc.inventedNum}">
                                        <input type="checkbox" name="isInvented" lay-skin="primary" value="1"
                                               class="layui-input-inline" ${proc.isInvented==1?'checked':''}>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;&nbsp;商品排序</label>
                                    <div class="layui-col-sm4">
                                        <input type="text" name="sort" class="layui-input" value="${proc.sort}" placeholder="请输入商品排序">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;&nbsp;商品标签</label>
                                    <div class="layui-col-sm4">
                                        <select class="select chosen-select" multiple name="label" id="label" xm-select="label">
                                            <c:forEach items="${labelList}" var="b">
                                                <option value="${b.name}">${b.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <hr>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;&nbsp;商品权益</label>
                                    <div class="layui-col-sm6">
                                        <c:forEach items="${interList}" var="i">
                                            <input type="checkbox" name="interest" title="${i.name}" value="${i.id}" ${i.checkFlag}>
                                        </c:forEach>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;&nbsp;商品图片</label>
                                    <div class="layui-col-sm8">
                                        <blockquote class="layui-elem-quote block_margin" style="width: 70%">
                                            请上传图片大小为 750 × 750 ,图片最多上传5张；<br>
                                            格式支持：.jpg、  .jpeg、  .png、  .bmp
                                        </blockquote>
                                        <div id="imgDiv" hidden="hidden">
                                            <c:forEach items="${proc.proImgs}" var="i">
                                                <input type="hidden" name="proImgs" value="${i}">
                                            </c:forEach>
                                        </div>
                                        <div class="layui-col-sm9">
                                            <div id="dropz" class="dropz"></div>
                                        </div>
                                    </div>
                                </div>
                                <c:if test="${needProperties}">
                                    <div class="layui-form-item" style="line-height: 38px">
                                        <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;&nbsp;商品属性</label>
                                        <div class="layui-col-sm5 layui-col-sm-offset2">
                                            <button type="button" class="layui-btn layui-btn-sm" onclick="addProperties($(this))">新增一组</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;</label>
                                        <div class="layui-col-sm8">
                                            <table class="layui-table">
                                                <tbody>
                                                <tr>
                                                    <th>属性名称</th>
                                                    <th>属性值</th>
                                                    <th>操作</th>
                                                </tr>
                                                </tbody>
                                                <tbody id="properties">
                                                <c:forEach items="${propertiesList}" var="p">
                                                    <tr>
                                                        <td width="10%">
                                                            <input style="height: 25px;" type="text" class="layui-input"
                                                                   name="properties" placeholder="适用人群"  value="${p.name}"></td>
                                                        <td width="10%">
                                                            <input style="height: 25px;" type="text" class="layui-input"
                                                                   name="propertiesVal"  placeholder="18~26岁" value="${p.value}"></td>
                                                        <td width="5%">
                                                            <div style="margin-left: 5px">
                                                                <a href="javaScript:;" class="layui-badge layui-bg-green"
                                                                   onclick="addProperties($(this))">新增</a>&nbsp;|
                                                                <a href="javaScript:;" class="layui-badge-rim" data-no="0"
                                                                   onclick="deleteProperties($(this))">删除</a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </c:forEach>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <hr>
                                </c:if>
                                <div class="layui-card-body" style="padding: 15px;"></div>
                                <div class="layui-form-item">
                                    <div class="layui-col-sm4 layui-col-sm-offset5">
                                        <div class="layui-footer" style="left: 0;">
                                            <button class="layui-btn layui-btn-normal" type="button" id="infoToNext">前往下一页</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card-body" style="padding: 15px;"></div>
                            <input type="hidden" name="tabIndex" value="1">
                        </form>
                    </div>
                    <%-- 商品规格 --%>
                    <div class="layui-tab-item">
                        <div class="layui-card-body" style="height: 1000px">
                            <div class="layui-col-sm12">
                                <div class="layui-col-md12">
                                    <blockquote class="layui-elem-quote">
                                        • <em> "移除" </em>按钮是移除整行规格，<em> "删除" </em>图标按钮是删除单个规格值。<br>
                                        • :: 和 ^ 作为该系统保留符号，请勿使用。
                                    </blockquote>
                                    <hr>
                                    <div class="clear"></div>
                                    <!--sku模板,用于克隆,生成自定义sku-->
                                    <div class="skuParentDiv">
                                        <div id="skuDataShow" style="display: block;margin-top: 5px">
                                            <div class="sku_div"><span class="sku_old">商品规格属性</span></div>
                                            <div class="clear"></div>
                                            <c:forEach items="${skuList}" var="s" varStatus="ss">
                                                <ul class="SKU_TYPE1">
                                                    <li sku-type-name="${s.name}">
                                                        <a href="javascript:void(0);" class="layui-badge" onclick="deleteSkuValGroup(this)">移除</a>
                                                        <input type="text" class="layui-input cusSkuTypeInputOld specmain_old" data-id="${ss.index+1}"
                                                               placeholder="规格名称" onkeyup="ValidateValue(this)" style="width: 90px" value="${s.name}" />
                                                    </li>
                                                </ul>
                                                <ul>
                                                    <c:forEach items="${s.detailList}" var="d">
                                                        <li>
                                                            <input type="checkbox" class="model_sku_val_old" hidden lay-skin="primary" value="${d}" checked />
                                                            <input type="text" name="skuVal" class="layui-input cusSkuValInputOld detail${ss.index+1}" value="${d}"
                                                                   placeholder="规格值" onkeyup="ValidateValue(this)" style="width: 80px" onchange="changeVal(this)" />
                                                            <i class="layui-icon layui-icon-delete delSkuVal" onclick="deleteSkuVal(this)"></i>
                                                        </li>
                                                    </c:forEach>
                                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary cloneSkuVal"
                                                            onclick="addSku(this)">添加SKU值</button>
                                                </ul>
                                                <div style="margin-bottom: 2px"></div>
                                            </c:forEach>
                                            <div class="clear"></div>
                                        </div>
                                        <button type="button" class="layui-btn layui-btn-sm" style="margin-top: 30px;"
                                                onclick="addSkuType(this)">添加SKU属性</button>
                                    </div>

                                    <div id="skuCloneModel" style="display: none;margin-top: 5px">
                                        <div class="clear"></div>
                                        <ul class="SKU_TYPE1">
                                            <li sku-type-name="">
                                                <a href="javascript:void(0);" class="layui-badge" onclick="deleteSkuValGroup(this)">移除</a>
                                                <input type="text" class="layui-input cusSkuTypeInputOld specmain_old" data-id=""
                                                       placeholder="规格名称" onkeyup="ValidateValue(this)" style="width: 90px" onchange="changeSkuType(this)"/>
                                            </li>
                                        </ul>
                                        <ul>
                                            <li>
                                                <input type="checkbox" class="model_sku_val_old" lay-skin="primary" value="" checked hidden />
                                                <input type="text" name="skuVal" class="layui-input cusSkuValInputOld"
                                                       placeholder="规格值" onkeyup="ValidateValue(this)" style="width: 80px" onchange="changeVal(this)"/>
                                                <i class="layui-icon layui-icon-delete delSkuVal" onclick="deleteSkuVal(this)"></i>
                                            </li>
                                            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="addSku(this)">添加SKU值</button>
                                        </ul>
                                        <div class="clear"></div>
                                    </div>
                                    <hr>
                                    <blockquote class="layui-elem-quote">
                                        • SKU编码不可重复，请先校验。<br>
                                        • 表头的文本框可对库存、成本价、建议销售价批量设置。
                                    </blockquote>
                                    <!--单个sku值克隆模板-->
                                    <li style="display: none;" id="onlySkuValCloneModel">
                                        <input type="checkbox" class="model_sku_val_old" lay-skin="primary" value="" checked hidden />
                                        <input type="text" name="skuV" onkeyup="ValidateValue(this)" class="layui-input cusSkuValInputOld"
                                               style="width: 80px" placeholder="规格值" onchange="changeVal(this)"/>
                                        <%-- 删除图标 --%>
                                        <i class="layui-icon layui-icon-delete delSkuVal" onclick="deleteSkuVal(this)"></i>
                                    </li>
                                    <div class="clear"></div>
                                    <div class="sku_div"><span class="sku_old">商品规格列表</span></div>
                                    <div id="skuTableShow"></div>
                                </div>
                                <div class="layui-col-sm2 layui-col-sm-offset5">
                                    <i class="layui-icon layui-icon-vercode check_code" onclick="checkSkuCode()">校验SKU编码</i>
                                    <br>
                                    <span class="red" id="skuInfo"></span>
                                </div>
                            </div>
                            <div class="layui-col-sm12" style="margin-top: 20px"><hr></div>

                            <div class="layui-form-item" style="margin-top: 20px">
                                <div class="layui-col-sm4 layui-col-sm-offset5">
                                    <div class="layui-footer" style="left: 0;">
                                        <button class="layui-btn layui-btn-normal" type="button" id="skuToNext">前往下一页</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <%-- 商品详情编辑区域 --%>
                    <div class="layui-tab-item">
                        <div class="layui-card-body">
                            <div class="layui-form-item" style="margin-top: 20px;display: none;">
                                <div class="layui-col-sm4 layui-col-sm-offset5">
                                    <div class="layui-footer" style="left: 0;">
                                        <button class="layui-btn layui-btn-normal" type="button" id="saveProduct">保存</button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-sm12">
                                    <textarea id="content" name="content" style="display: none">${describe.pcDetails}</textarea>
                                    <script id="articleEditor" type="text/plain" style="width:100%;height:400px;"></script>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="tabIndex" value="${tabIndex}">
<script src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/plugins/image/previewImg.js"></script>
<script type="text/javascript" src="/js/plugins/dropzone/dropzone.js"></script>
<script type="text/javascript" src="/js/sx/sku/skuTableShow.js"></script>
<script type="text/javascript" src="/js/sx/sku/editProcSku.js"></script>
<%--<script type="text/javascript" src="/js/sx/sku/createSkuTable.js"></script>--%>
<script type="text/javascript" src="/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/js/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/js/plugins/layui-formSelect/formSelects-v4.min.js"></script>
<script>
    //商品类型
    var productType = $("#proType").val();
    //计价方式
    var vType = ${proc.valuationType};
    //单位名称
    var unit = $("#unit").val();
    //重量计价单位
    var wUnit = $("#wUnit").val();
    //原规格的最后一条记录的data-id
    var lastId = $("#skuDataShow").children("ul.SKU_TYPE1:last").find(".specmain_old").attr("data-id");
    //原规格数据
    var array = new Array();
    var skuArr = new Array();
    var descArr = new Array();

    layui.config({
        //静态资源所在路径
        base: '/layuiadmin/'
    }).extend({
        //主入口模块
        index: 'lib/index'
    }).use(['index', 'form','upload','table','laydate','util'], function(){
        var $ = layui.$, admin = layui.admin,
            element = layui.element,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            util = layui.util,
            laydate = layui.laydate;
        util = layui.util;
        //返回顶部
        util.fixbar({
            top: true,
            css: {right: 15, bottom: 35},
            bgcolor: '#399cff'
        });
        form.render();
        table.render();
        element.render();
        //tab绑定事件，页面刷新时定位到制定的tab
        //使用的是layui的'lay-id'属性
        var tabIndex = $("#tabIndex").val();
        element.tabChange('test',tabIndex);

        //日期选择
        lay(".test-item").each(function () {
            laydate.render({
                elem: this,
                type: 'datetime',
                trigger: 'click'
            });
        });

        //下拉框事件
        form.on('select',function (data) {
            //得到select原始DOM对象
            var dom = data.elem;
            //得到选择下拉框类型:1、2平台分类(1一级/2二级)；5、6商家分类(5一级/6二级)
            var selectType = $(dom).data("type");
            //得到点击下拉框类型，11、21点击平台(11一级/21二级)；51、61点击商家(51一级/61二级)
            //此处是重新选择时需要清空其它下拉框的数据
            var clickType = $(dom).data('click');
            //得到被选中元素的id
            var id = data.value;
            //selectType为1时代表是选择行业
            if(selectType === 1){
                $.ajax({
                    url: "/classify/queryClassifyListByAjaxPlat",
                    data: {"pid":id,"type":3,"flag":2},
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        var html = '<option value="">请选择</option>';
                        $.each(data, function (i, v) {
                            html += '<option value="' + v.id + '" >' + v.name + '</option>'
                        });
                        $(".secondClassify").append(html);
                        //重新渲染下拉框元素
                        form.render('select');
                    }
                });
            }else if(selectType === 2){
                $.ajax({
                    url: "/classify/queryClassifyListByAjaxPlat",
                    data: {"pid":id,"type":3,"flag":3},
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        var html = '<option value="">请选择</option>';
                        $.each(data, function (i, v) {
                            html += '<option value="' + v.id + '" >' + v.name + '</option>'
                        });
                        $(".thirdClassify").append(html);
                        //重新渲染下拉框元素
                        form.render('select');
                    }
                });
            }else if(selectType === 5){
                //
                $.ajax({
                    url: "/classify/queryClassifyListByAjaxBusiness",
                    data: {"pid":id,"type":2,"flag":2},
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        var html = '<option value="">请选择</option>';
                        $.each(data, function (i, v) {
                            html += '<option value="' + v.id + '" >' + v.name + '</option>'
                        });
                        $(".secondclass").append(html);
                        //重新渲染下拉框元素
                        form.render('select');
                    }
                });
            }else if(selectType === 6){
                $.ajax({
                    url: "/classify/queryClassifyListByAjaxBusiness",
                    data: {"pid":id,"type":2,"flag":3},
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        var html = '<option value="">请选择</option>';
                        $.each(data, function (i, v) {
                            html += '<option value="' + v.id + '">' + v.name + '</option>'
                        });
                        $(".thirdclass").append(html);
                        //重新渲染下拉框元素
                        form.render('select');
                    }
                });
            }else if(selectType === 9){
                //选择商品类型
                if(id == 1){
                    $("#advanceDiv").css("display","none");
                    $("#groupInfoDiv").css("display","none");
                    $("#groupTimeDiv").css("display","none");
                }else if(id == 2){
                    //预售显示
                    $("#advanceDiv").css("display","block");
                    //其它隐藏
                    $("#groupInfoDiv").css("display","none");
                    $("#groupTimeDiv").css("display","none");
                }else if(id == 3){
                    //团购信息显示
                    $("#groupInfoDiv").css("display","block");
                    $("#groupTimeDiv").css("display","block");
                    //其它信息隐藏
                    $("#advanceDiv").css("display","none");
                }else if(id == 4){
                    $("#advanceDiv").css("display","none");
                    $("#groupInfoDiv").css("display","none");
                    $("#groupTimeDiv").css("display","none");
                }
            }else if(selectType === 8){
                $.ajax({
                    url: "/addr/queryAddressNoPage",
                    data: {"pid": id},
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        var html = '<option value="">请选择</option>';
                        $.each(data.data, function (i, v) {
                            html += '<option value="' + v.id + '">' + v.name + '</option>'
                        });
                        $(".city").append(html);
                        //重新渲染下拉框元素
                        form.render('select');
                    }
                });
            }
            //当下拉框重新点击时清空其它下拉框的数据
            if(clickType === 11){
                $(".secondClassify").empty();
                $(".thirdClassify").empty();
            }else if(clickType === 21){
                $(".thirdClassify").empty();
            }else if(clickType === 51){
                $(".secondclass").empty();
                $(".thirdclass").empty();
            }else if(clickType === 61){
                $(".thirdclass").empty();
            }else if(clickType === 81){
                $(".city").empty();
            }
        });

        //单选框事件
        form.on('radio',function (data) {
            var val = data.value;
            if(val == 2){
                $("#weightUnit").css("display","");
                $("#checkType").val(val);
            }else if(val == 1){
                $("#weightUnit").css("display","none");
                $("#checkType").val(val);
            }
            form.render();
        });

        var active = {
            tip1:function(){
                layer.tips('总人数请填写数字', this, {
                    tips: 2
                });
            },
            tip2:function(){
                layer.tips('不选择开始时间默认立即开始<br>不选择结束时间默认没有结束时间', this, {
                    tips: 1
                });
            },
            tip3:function(){
                layer.tips('"礼包商品"的内容填写在此处', this, {
                    tips: 2
                });
            },
            tip4:function(){
                layer.tips('个、件、斤、克等单位名称', this, {
                    tips: 2
                });
            }
        };

        /* 每个tab中的跳转 */
        $("#infoToNext").on('click',function () {
            //数据验证
            //tab跳转
            element.tabChange('test',2);
            window.scrollTo(0,0);
        });
        $("#skuToNext").on('click',function () {
            //数据验证
            //tab跳转
            element.tabChange('test',3);
            window.scrollTo(0,0);
        });
        $('.layui-input').on('focus', function(){
            var type = $(this).data('type');
            active[type] && active[type].call(this);
        });
        $('.layui-textarea').on('click', function(){
            var type = $(this).data('type');
            active[type] && active[type].call(this);
        });
    });

    $(function () {
        /* 富文本编辑器加载 */
        var ue = UE.getEditor('articleEditor');
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == '/uploadFile') {
                return '/base/uploadRichFile';
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        };
        UE.getEditor('articleEditor').ready(function() {
            UE.getEditor('articleEditor').setContent($("#content").text());
        });
        // layui多选插件加载
        var formSelects = layui.formSelects;
        formSelects.value('label');
        var label = $("#labelIds").val();
        showLabels(label);
        //规格组数据装载
        <c:forEach items="${skuDetailList}" var="a">
            var detail = {};
            detail.skuId = "${a.id}";
            detail.stock = "${a.qty}";
            detail.cost = "${a.cost}";
            detail.price = "${a.price}";
            detail.groupPrice = "${a.groupPrice}";
            detail.skuCode = "${a.skuCode}";
            detail.specName = "${a.specName}";
            detail.point = "${a.point}";
            array.push(detail);
        </c:forEach>
        //商品规格初始化加载
        initProductSku();
        //检查商品类型并显示数据
        checkProductTypeShow();
    });

    /* 检查商品类型并显示数据 */
    function checkProductTypeShow(){
        if(productType == 1){
            //do nothing
        }else if(productType == 3){
            $("#groupInfoDiv").css("display","block");
            $("#groupTimeDiv").css("display","block");
        }else if(productType == 5){
            $("#customerLevel").css("display","block");
        }
    }

    /* 商品标签数据回显 */
    function showLabels(ids){
        var formSelects = layui.formSelects;
        var arr = [];
        var result = ids.split(",");
        for(var i = 0,len = result.length; i< len;i++){
            arr.push(result[i]);
        }
        formSelects.value('label', arr);
    }

    /* 图片批量、拖拽上传插件 */
    $("#dropz").dropzone({
        url: "/upload/upload",
        maxFiles: 5,
        maxFilesize: 5,
        acceptedFiles: ".gif,.jpg,.png",
        addRemoveLinks: true,
        dictDefaultMessage: "点击或者拖拽文件以上传",
        init: function () {
            this.emit("initimage", "${proc.proImgs}","${proc.proImgs}");
            this.on("success", function(file,data) {
                var url=file.previewElement.classList[3];
                $("#imgDiv").append('<input type="text" name="proImgs" value="'+url+'"/> ');
            });
            this.on("removedfile", function(file) {
                var url = file.previewElement.classList[3];
                $("#imgDiv").find("input").each(function(e) {
                    var val = $(this).val();
                    if (url == val) {
                        $(this).remove();
                    }
                });
            });
        }
    });


    /* 保存商品 */
    $("#saveProduct").on('click',function () {
        $("#testLoad").css("display","block");
        var index = layer.open({
            type: 1,
            title:'',
            content: $('#testLoad')
        });
        //文本编辑获取值
        $("#procContent").text(UE.getEditor('articleEditor').getContent());
        //规格字符串
        getSpecData();
        //商品规格列表数据
        getPriceData();
        $("#addProductForm").ajaxSubmit({
            type: 'post',
            url: "/product/editProduct",
            data: $("#addProductForm").serialize(),
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    layer.close(index);
                    layer.msg(data.desc);
                    setTimeout(function () {
                        window.location.href = "/product/product";
                    }, 1000)
                } else {
                    layer.close(index);
                    setTimeout(function () {
                        layer.msg(data.desc);
                    }, 500)
                }
            },
            error: function () {
                layer.msg("请检查页面信息是否正确");
            }
        });
    });

    /* 拿到规格名-规格值的数据 */
    function getSpecData(){
        /* 格式：颜色::红色^黄色^ */
        var jsonArr=new Array();
        $(".specmain_old").each(function(e){
            var mainId=$(this).attr("data-id");
            var str="";
            $(".detail"+mainId).each(function (e) {
                str+=$(this).val()+"^";
            });
            //规格的值
            str = str.substr(0,str.length-1);
            //规格名称
            if($(this).val().length > 0){
                var specName = $(this).val()+"::";
                jsonArr.push(specName+str);
            }
        });
        $("#skuDetail").val("");
        $("#skuDetail").val(jsonArr);
    }

    /* 获取商品规格列表的价格等数据 */
    function getPriceData(){
        //库存
        var stock = new Array();
        //成本价
        var cost = new Array();
        //销售价
        var price = new Array();
        //sku编码
        var skuCode = new Array();
        //团购价
        var group = new Array();
        $(".stock").each(function (e) {
            if($(this).val().length < 1){
                layer.msg("商品【库存】有未设置选项！");
                return;
            }
            stock.push($(this).val())
        });
        $(".cost").each(function (e) {
            if($(this).val().length < 1){
                layer.msg("商品【成本价】有未设置选项！");
                return;
            }
            cost.push($(this).val())
        });
        $(".price").each(function (e) {
            if($(this).val().length < 1){
                layer.msg("商品【价格】有未设置选项！");
                return;
            }
            price.push($(this).val())
        });
        $(".skuCode").each(function (e) {
            if($(this).val().length < 1){
                layer.msg("商品【SKU编码】有未设置选项！");
                return;
            }
            skuCode.push($(this).val())
        });
        $(".groupPrice").each(function (e) {
            if($(this).val().length < 1){
                layer.msg("商品【团购价】有未设置选项！");
                return;
            }
            group.push($(this).val())
        });
        $("#stockList").val(stock);
        $("#costList").val(cost);
        $("#priceList").val(price);
        $("#skuList").val(skuCode);
        $("#groupList").val(group);
    }

    /* 商品编码重复性验证 */
    /*function checkProCode() {
        var proCode = $("#proCode").val();
        if (proCode === ""){
            layer.msg('请输入商品编码！');
            return;
        }
        $.ajax({
            url: '/product/handleCheckProCode',
            data: {'proCode': proCode},
            dataType: "json",
            type: "post",
            success: function (status) {
                if (status) {
                    //status=true为空 可新增
                    $("#checkInfo").text("校验成功");
                    //下一页按钮显示
                    $("#infoToNext").css("display","");
                    //规格提示、按钮显示
                    $("#skuTip").css("display","none");
                    $("#skuBtn").css("display","");
                    //已验证重复性标记
                    $("#checkFlag").val(1);
                } else {
                    //status=false不为空 不可新增
                    $("#checkInfo").text("编码已存在");
                    $("#checkFlag").val(0);
                }
            }
        })
    }*/

    /* sku编码重复性验证 */
    function checkSkuCode() {
        //sku编码
        var skuCodeArr = new Array();
        //sku编码需要验证的行数
        var needLength = 0;
        $(".skuCode").each(function (e) {
            var needCheck = $(this).attr("need-check");
            if(needCheck != null && needCheck.length > 0 && needCheck == 1){
                var skuVal = $(this).val();
                if(skuVal.length > 0){
                    skuCodeArr.push(skuVal);
                    needLength++;
                }else{
                    layer.msg("有未填写SKU编码选项！");
                    return false;
                }
            }
        });
        if(skuCodeArr.length > 0 && skuCodeArr != null && needLength == skuCodeArr.length){
            var proCode = $("#proCodeSave").val();
            $.ajax({
                url: '/product/handleCheckSkuCode',
                data: {"skuCode":JSON.stringify(skuCodeArr),"proCode":proCode},
                dataType: "json",
                type: "post",
                success: function (data) {
                    if (data.status) {
                        $("#skuInfo").text("校验通过！");
                        $("#skuToNext").css("display","");
                        $("#saveProduct").css("display","");
                        /* 组装规格名-规格值 */
                        /* 格式：颜色::红色^黄色^ */
                        var jsonArr=new Array();
                        $(".specmain").each(function(e){
                            var mainId=$(this).attr("data-id");
                            var str="";
                            $(".detail"+mainId).each(function (e) {
                                str+=$(this).val()+"^";
                            });
                            //规格的值
                            str = str.substr(0,str.length-1);
                            //规格名称
                            if($(this).val().length > 0){
                                var specName = $(this).val()+"::";
                                jsonArr.push(specName+str);
                            }
                        });
                        $("#skuDetail").val(jsonArr);
                    } else {
                        var msg = "";
                        $.each(data.data, function (i, v) {
                            msg += v + ',';
                        });
                        if(msg.length > 0){
                            $("#skuInfo").text("校验失败: " + msg +" 重复");
                        }else{
                            $("#skuInfo").text("校验失败: " + data.desc);
                        }
                        $(".check_code").css("display","none");
                        setTimeout(function () {
                            $(".check_code").css("display","");
                        }, 2000)
                    }
                }
            })
        }
    }

    /* 批量设置库存、成本价、销售价 */
    function batchSet(type) {
        if(type === 1){
            var stockNew = $("#stockBatch").val();
            $(".stock").each(function(e){
                $(this).val(stockNew);
            });
        }else if(type === 2){
            var costNew = $("#costBatch").val();
            $(".cost").each(function(e){
                $(this).val(costNew);
            });
        }else if(type === 3){
            var priceNew = $("#priceBatch").val();
            $(".price").each(function(e){
                $(this).val(priceNew);
            });
        }else if(type === 4){
            //团购单价
            var groupPriceNew = $("#groupBatch").val();
            $(".groupPrice").each(function(e){
                $(this).val(groupPriceNew);
            });
        }
    }

    /* 正则验证不可输入特殊字符 */
    function ValidateValue(textbox) {
        var reg = RegExp(/::/);
        var IllegalString = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）~@%——|{}【】‘；：”“'。，、？]‘'";
        var textboxvalue = textbox.value;
        var index = textboxvalue.length - 1;
        var s = textbox.value.charAt(index);
        if (IllegalString.indexOf(s) >= 0) {
            s = textboxvalue.substring(0, index);
            textbox.value = s;
        }else if(textboxvalue.match(reg)){
            s = textboxvalue.substring(0, index);
            textbox.value = s;
        }
    }

    /* 新增附加属性 */
    function addProperties(it){
        var add = '<tr><td>'+
            '<input style="height:25px;" type="text" class="layui-input" name="properties" placeholder="适用人群" value=""></td>'+
            '<td>'+
            '<input style="height:25px;" type="text" class="layui-input" name="propertiesVal" placeholder="18~26岁"></td>'+
            '<td>'+
            '<div style="margin-left: 5px;margin-top: 3px">'+
            '<a href="javaScript:;" class="layui-badge layui-bg-green" onclick="addProperties($(this))">新增</a>&nbsp;|&nbsp;'+
            '<a href="javaScript:;" class="layui-badge-rim" onclick="deleteProperties($(this))">删除</a>'+
            '</div>'+
            '</td></tr>';
        $('#properties').append(add);
    }

    //删除附加属性
    function deleteProperties(it){
        $(it).parent().parent().parent().remove();
    }
</script>
</body>
</html>